<template>
  <div class="con">
    <div class="title">反馈详情</div>
    <div class="i_warp word_break__break_all">
      <div class="item" v-for="(item, index) in list" :key="index">
        <div class="tips">
          <p>{{ item.tips }}</p>
        </div>
        <div class="val">
          <p>{{ item.value }}</p>
        </div>
      </div>
    </div>
    <div class="content_warp">
      <div class="tips">反馈内容</div>
      <div class="val">{{ feedbackObj.content }}</div>
      <div class="resources_warp">
        <!-- 反馈内容的格式总共有那些 -->
        <!-- 预览图视频 -->
        <div class="item" v-for="(item, index) in sourceObj.list" :key="index">
          <div class="v_warp" @click="handlePreview(item)">
            <el-image style="width: 90px; height: 90px" :src="item.preview_url" :fit="'none'"
              :preview-src-list="sourceObj.imageList" v-if="isImage(item.fileName)"></el-image>
            <video-player class="video-player vjs-custom-skin" ref="videoPlayer" :options="playerOptions"
              v-if="isVideo(item.fileName)"></video-player>
          </div>
        </div>
      </div>
    </div>


    <!-- :info-row="previewInfoRow" -->
    <PreviewDialog :visible.sync="dialogPreviewVisible" />
  </div>
</template>
<script>
import { getFeedback } from "@/api/feedback/details"
import { downloadFile } from '@/api/public'
import PreviewDialog from './components/PreviewDialog.vue'

import { videoPlayer as VideoPlayer } from 'vue-video-player';
import 'video.js/dist/video-js.css';

export default {
  components: {
    VideoPlayer,
    PreviewDialog
  },
  data() {
    return {
      playerOptions: {
        //视频url设置,直播流为例
        sources: [
          // {
          //   src: '',//视频文件地址
          //   // type: ''//视频类型，这里可以不写，如果写一定要写对，否则会无法播放
          // }
        ],
        // 其他设置项
        muted: false, // 默认情况下将会消除任何音频。
        notSupportedMessage: "此视频暂无法播放，请稍后再试",//提示信息
        autoplay: false,//是否自动播放

        fluid: true, // 开启流体模式（根据父容器宽度自动计算高度）

        currentTimeDisplay: true, // 当前时间
        timeDivider: true,    // 时间分隔符（如 00:00 / 01:00）
        durationDisplay: true, // 总时长
        // liveDisplay: false,   // 直播状态显示
        fullscreenToggle: true,// 全屏按钮
        aspectRatio: "1:1",//比例
        // poster: 'http://path/to/poster.jpg',//视频封面
      },


      dialogPreviewVisible: false,

      feedbackObj: {},
      // 视频图片参数
      sourceObj: {
        list: [],
        imageList: [],
        videoList: [],
      }
    }
  },
  computed: {
    list() {
      let arr1 = [
        // {
        //   tips: '所属品牌',
        //   val: 'nickName'
        // },
        {
          tips: '反馈人',
          val: 'createBy'
        }, {
          tips: '手机号',
          val: 'contactInfo'
        }, {
          tips: '手机型号',
          val: 'phoneModel'
        }, {
          tips: '反馈时间',
          val: 'createDate'
        }
      ]
      if (!this.feedbackObj.id) {
        return []
      }
      let arr2 = []
      arr1.forEach(el => {
        arr2.push({
          tips: el.tips,
          value: this.feedbackObj[el.val] || '',
        })
      })
      return arr2
    },
  },
  created() {
    this.pageInfo()
  },
  methods: {
    pageInfo() {
      let { id = 0 } = this.$route.query;
      id = parseInt(id) || 0
      getFeedback({ id }).then(res => {
        if (res.code === 200) {
          this.feedbackObj = res.data || {}
          this.setSourceList()
        } else {
        }
      })
    },
    setSourceList() {
      /**
      * 图片： ".gif", ".jpg", ".jpeg", ".png", ".webp"
      * 视频：".mp4", ".avi"
      */
      let obj = this.feedbackObj
      if (!obj.filePath) {
        return []
      }
      try {
        // filePath 内容 图片视频 , 号分割
        let source_arr = obj.filePath.split(',');

        // let test_imang_arr = ['help/68f928fe-c62b-4da9-bfbe-17fd118d1c3d_a1f8a35b-ad73-450e-befe-49d137836863.png', 'help/9e18cc44-4fdf-4915-b316-94676a5259b5_6040e78b-7656-4726-a10e-bca4c0afec87.png'],
        //   test_video_arr = ['help/60878095-fd50-429b-8049-7635d19ccf59_20250808-164333.mp4'],
        //   testArr = [...test_imang_arr, ...test_video_arr, ...test_video_arr];

        /**
         * @testArr 测试图片视频数据 数组
         * @source_arr 真实图片视频数据 数组
         * 下面是每一项的参数
         * @preview_url 预览图 url
         * @fileName 名字
         */
        // 此处切换数据源
        let arr_all = source_arr;

        arr_all.forEach(el => {
          if (!this.isImageAndisVideo(el)) {
            return
          }
          let fileName = el;
          let preview_url = process.env.VUE_APP_IMG_BASE_URL + '/' + el;
          this.sourceObj.list.push({
            preview_url,
            fileName,
          })
          if (this.isImage(el)) {
            this.sourceObj.imageList.push(preview_url)
          }
          if (this.isVideo(el)) {
            this.playerOptions.sources.push({
              src: preview_url,
              type: `video/${this.isVideo(el, true) || ''}`, // 根据实际视频格式调整（如 'video/webm'）
            });
          }
        })
      } catch (error) {
        console.log(error);
      }
    },
    handlePreview(item) {
    },
    isImageAndisVideo(name) {
      return /\.(gif|jpg|jpeg|png|webp|mp4|avi)$/.test(name)
    },
    isImage(name) {
      return /\.(gif|jpg|jpeg|png|webp)$/.test(name)
    },
    isVideo(name, isStr) {
      if (isStr) {
        let obj = {
          mp4: /\.(mp4)$/.test(name),
          avi: /\.(avi)$/.test(name),
        }
        return obj.mp4 ? 'mp4' : obj.avi ? 'avi' : ''
      }
      return /\.(mp4|avi)$/.test(name)
    },
  }
}
</script>
<style scoped lang="scss">
.con {
  background-color: #fff;
  padding: 24px;
  margin: 20px;
  border-radius: 16px;
}

.title {
  font-size: 18px;
  font-weight: 500;
  line-height: 24px;
  padding-bottom: 36px;
  color: #15181D;
}

@mixin com_tips {
  font-size: 14px;
  line-height: 18px;
  color: #8B8B8B;
}

@mixin com_val {
  font-size: 14px;
  line-height: 18px;
  color: #15181D;
}

.i_warp {
  display: grid;
  grid-gap: 40px 48px;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));

  .tips {
    @include com_tips;
    padding-bottom: 16px;
  }

  .val {
    @include com_val;
  }
}

.content_warp {
  padding-top: 40px;

  .tips {
    @include com_tips;
  }

  .val {
    @include com_val;
    padding: 16px 0;
  }
}

.resources_warp {
  min-height: 90px;
  display: grid;
  gap: 12px;
  flex-direction: column;
  grid-template-columns: repeat(3, 90px);

  .item {
    border-radius: 12px;
    overflow: hidden;
  }

  .v_warp {
    display: flex;
  }
}

::v-deep {
  .v_warp {
    .video-player {
      width: 100%;
      height: 90px;

      .vjs-big-play-button {
        width: calc(100% - 20px);
        max-width: 3em;
      }

      .vjs-control-bar {
        justify-content: right;
      }

      .vjs-modal-dialog {
        .vjs-modal-dialog-content {
          padding: 10px;
        }
      }
    }
  }
}
</style>